<body>
      <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
      <link rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
            crossorigin="anonymous">

      <style>
            .container div {
                  background-color: skyblue;
            }
      </style>

      <div class="container">
            <!-- 大屏一行4个 中屏一行2个 小屏一行1个 -->
            <div class="col-lg-3 col-md-6 col-sm-12">1</div>
            <div class="col-lg-3 col-md-6 col-sm-12">2</div>
            <div class="col-lg-3 col-md-6 col-sm-12">3</div>
            <div class="col-lg-3 col-md-6 col-sm-12">4</div>
      </div>
</body>